<template>
  <el-row :style="{height: contentHeight}" class="content-container">
    <el-col :span="6" class="content-left">
      <!-- 树 -->
      <el-tree ref="deptTreeRef" node-key="id" :data="deptTree" :props="defaultProps" :default-expand-all="true"
        :filter-node-method="filterNode" @node-click="getNodeData" :expand-on-click-node="false"
        class="filter-tree" style="overflow: auto" highlight-current />
    </el-col>
    <el-col :span="17" class="content-right">
      <user-list ref="userRef" :roleId="roleId" :selectDeptId="selectDeptId" />
    </el-col>
  </el-row>
</template>

<script>
  import {
    getDeptTree
  } from '@/api/sys/dept/index';

  import * as common from '@/utils/base/common'

  /* 组件 */
  import userList from './relate-user-list'

  export default {
    /* 已有用户 */
    name: '',
    data() {
      return {
        contentHeight: parseInt(parseInt(document.documentElement.clientHeight)) / 2 + 'px',

        /* 部门树 */
        listLoading: false,
        deptTree: [],
        defaultProps: {
          children: 'children',
          label: 'deptName'
        }, // 配置选项

        /* 用户列表参数 */
        selectDeptId: '',

      }
    },
    components: {
      userList
    },
    props: ['roleId'],
    methods: {

      initData() {
        this.getList()
      },

      refreshData() {
        this.selectDeptId = ''
        this.initData()
        this.$refs.userRef.initData()
      },

      getList() {
        this.listLoading = true;
        getDeptTree().then(response => {
          this.listLoading = false;
          this.deptTree = response.data
        }).catch(err => {
          this.listLoading = false;
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      // 节点被点击时, 获取该节点数据
      getNodeData(data) {
        this.selectDeptId = data.id
      },

      // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },

    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/tree-list.css";

  /* 弹出框容器 */
  .dialog-container {
    width: 100%;
    height: 100%;
  }

  .dict-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .dict-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    cursor: pointer;
  }

  .unselect {
    background: #e8f3fe;
    color: #7dbcfc;
  }

  .select {
    background: #409EFF;
    color: #FFFFFF;
  }
</style>
